containing the sample lable image */
/* put inside
elements*/
/*before 4/4/2023 was like this:*/
/*.RoundedCornerTable td, th{*/
}
.RoundedCornerTable thead{
font-weight:bold;
border-bottom:1px solid #000000;
}
.RoundedCornerTable tbody td{
padding:7px;
/*border: 1px solid #000000;*/
}
.RoundedCornerTable th:first-of-type{
border-top-left-radius:10px;
}
.RoundedCornerTable th:last-of-type{
border-top-right-radius:10px;
}
.RoundedCornerTable tr:last-of-type > td:first-of-type{
border-bottom-left-radius:10px;
/*JEF added > selector to handle subtables in last of parent 9/20/2022*/
}
.RoundedCornerTable tr:last-of-type > td:last-of-type{
border-bottom-right-radius:10px;
/*JEF added > selector to handle subtables in last of parent 9/20/2022*/
}
.RoundedCornerTable tr:hover{
background-color: #ced3df;
}
.RoundedCornerTableTheSecond{
/*Used when standard RoundedCornerTable rounds the wrong corners*/
/*Use the classes below to specify which cells get rounded corners*/
border: 2px solid #0B326B;
border-collapse: separate;
margin-bottom:20px;
margin-top: 20px;
font-size: 11pt;
max-width:80%;
border-radius: 14px;
-moz-border-radius: 14px;
margin-left:auto;
margin-right: auto;
}
/* added JEF 12/03/2024 for mobile */
@media screen and (max-width: 600px){
.RoundedCornerTableTheSecond{max-width:100%;}
}
.RoundedCornerTableTheSecond thead{
font-weight:bold;
border-bottom:1px solid #000000;
}
.RoundedCornerTableTheSecond th{
padding: 7px;
background-color: #e8e8e8;
}
.RoundedCornerTableTheSecond td{
padding: 7px;
vertical-align: top;
}
.RoundedCornerTableTheSecond tbody:hover td[rowspan] {
background: #ced3df;
}
.RoundedCornerTableTheSecond tr:hover td {
background: #ced3df;
}
.RoundedCornerTwoCellTable{
/* Used to handle air handler part tables that have only 2 cells horz. */
border: 2px solid #0B326B;
vertical-align: middle;
text-align:center;
border-collapse: separate;
margin-bottom:20px;
font-size: 11pt;
max-width:80%;
border-radius: 14px;
-moz-border-radius: 14px;
margin-left:auto;
margin-right: auto;
}
/* added JEF 12/03/2024 for mobile */
@media screen and (max-width: 600px){
.RoundedCornerTwoCellTable{max-width:100%;}
}
.RoundedCornerTwoCellTable tbody td{
padding-left:3rem;
padding-right: 3rem;
}
.RoundedCornerTwoCellTable th{
border-top-left-radius:10px;
}
.RoundedCornerTwoCellTable td{
border-top-right-radius:10px;
}
.RoundedCornerTwoCellTable th{
border-bottom-left-radius:10px;
}
.RoundedCornerTwoCellTable td{
border-bottom-right-radius:10px;
}
.RoundedTopLeft{
border-top-left-radius:10px;
}
.RoundedTopRight{
border-top-right-radius:10px;
}
.RoundedBottomLeft{
border-bottom-left-radius:10px;
}
.RoundedBottomRight{
border-bottom-right-radius:10px;
}
/*.SimpleSmallTable{
}*/
.PartsListTable td:nth-child(2){
text-align: left;
}
.PartsListTable tr:nth-child(even){
background-color: #e8e8e8;
}
.ErrorCodeTable {
text-align: left;
}
.ErrorCodeTable tr:nth-child(even){
background-color: #e8e8e8;
}
.ErrorCodeTable th:nth-child(1){
width:120px;
text-align: center;
}
.PartByModelTable{
/* comment out JEF 7/6/2023 for conflict with RoundedCornerTable */
/* margin: auto; */
box-shadow: 3px 2px 12px rgb(0 0 0 / 40%);
max-width: 80%;
}
/*added and repaired much the PartByModelTableFixedLayout*/
/*class 4/5/2023 JEF to fix 2100 Heating Element part 24*/
.PartByModelTableFixedLayout{
margin: auto;
box-shadow: 3px 2px 12px rgb(0 0 0 / 40%);
width: 100%;
table-layout: fixed;
margin-bottom: 1.5rem;
border: 2px solid #0B326B;
vertical-align: middle;
text-align:center;
border-collapse: separate;
margin-bottom:20px;
font-size: 11pt;
max-width:80%;
border-radius: 14px;
-moz-border-radius: 14px;
margin-left:auto;
margin-right: auto;
}
/* added JEF 12/03/2024 for mobile */
@media screen and (max-width: 600px){
.PartByModelTableFixedLayout{max-width:100%;}
}
.PartByModelTableFixedLayout td, .PartByModelTableFixedLayout th{
padding: 7px;
}
.PartByModelTableFixedLayout p{
margin-top: 0;
margin-bottom: 0;
padding-right: 10px;
}
.PartByModelTableFixedLayout tr:nth-child(even){
background-color: #e8e8e8;
}
.PartByModelTableFixedLayout tr:nth-child(odd) td{
border-left-color: #e8e8e8;
border-left-width: 1px ;
border-left-style: solid;
border-right-color: #e8e8e8;
border-right-width: 1px ;
border-right-style: solid;
}
@media screen and (min-width: 850px) {
/*added section 4/5/2023 JEF to fix 2100 Heating Element part 24*/
.PartByModelTableFixedLayout tbody tr:hover{
background-color: #ced3df;
}
.PartByModelTableFixedLayout th:first-of-type{
border-top-left-radius:10px;
}
.PartByModelTableFixedLayout th:last-of-type{
border-top-right-radius:10px;
}
.PartByModelTableFixedLayout tr:last-of-type > td:first-of-type{
border-bottom-left-radius:10px;
}
.PartByModelTableFixedLayout tr:last-of-type > td:last-of-type{
border-bottom-right-radius:10px;
}
}
@media screen and (max-width: 850px) {
/* .PartByModelTableFixedLayout {
border: 0;
} */
.PartByModelTableFixedLayout thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.PartByModelTableFixedLayout tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
.PartByModelTableFixedLayout td {
border-bottom: 1px solid #ddd;
display: block;
/* font-size: .8em; */
text-align: right;
padding: 7px;
}
.PartByModelTableFixedLayout td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
/* content: "test"; */
float: left;
font-weight: bold;
padding-left: 10px;
/* text-transform: uppercase; */
}
.PartByModelTableFixedLayout tr:first-of-type td:first-child {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.PartByModelTableFixedLayout td:last-child {
border-bottom: 0;
}
.PartByModelTableFixedLayout tr:last-of-type > td:last-of-type{
border-bottom-left-radius:10px;
}
.PartByModelTableFixedLayout tr:last-of-type > td:last-of-type{
border-bottom-right-radius:10px;
}
.PartByModelTableFixedLayout tr td:first-of-type{
font-weight: 700;
}
.PartByModelTableFixedLayout tr:last-of-type{
border-bottom: none;
margin-bottom: 0;
}
}
.PartByModelTable th{
padding-left: 3rem;
padding-right: 3rem;
/*JEF changed remove generic */
/*before 4/4/2023 was like this:*/
/* .PartByModelTable th, td{ */
}
.Left-Justify-Last-Column td:last-of-type{
text-align: left;
}
.ZebraStripeTable tr:nth-child(even){
background-color: #e8e8e8;
}
.ZebraStripeTable tr:nth-child(odd) td{
border-left-color: #e8e8e8;
border-left-width: 1px ;
border-left-style: solid;
border-right-color: #e8e8e8;
border-right-width: 1px ;
border-right-style: solid;
}
.ZebraStripeRowspanFix tbody:nth-child(even){
background-color: #e8e8e8;
}
.RoundedCornerTable p, .RoundedCornerTableTheSecond p{
margin-top: 0;
margin-bottom: 0;
}
/* .PartByModelTable th{
max-width:180px;
} */
/* .PartByModelTable td{ */
/* border: 1px solid white; */
/* commented out 7/19/23 JEF */
/* } */
.PartByModelTable tr:nth-child(even){
background-color: #e8e8e8;
}
.FactoryOnlyHeader{
background-color: #c00000;
/* border: 2px solid #c00000; */
}
.FactoryOnlySection{
max-width:80%;
margin:auto;
padding:10px;
border: 1px solid #c00000;
border-radius: 10px;
}
/* added JEF 12/03/2024 for mobile */
@media screen and (max-width: 600px){
.FactoryOnlySection{max-width:100%;}
}
.FactoryOnlyPartTable{
margin: auto;
color: #c00000;
}
.FactoryOnlyPartTable th{
width:180px;
}
.FactoryOnlyPartTable td{
border: 1px solid white;
}
.FactoryOnlyPartTable tr:nth-child(even){
background-color: #e8e8e8;
}
.FactoryOnlyPartTable{
border-color: #c00000 ! important;
}
.SpecificationsTable tr th:first-child {
font-weight:bold;
}
.SpecificationsTable tr td:first-child {
font-weight:bold;
}
.SpecificationsTable tr:nth-child(even){
background-color: #e8e8e8;
}
.SpecificationsTable td:nth-child(1) {
text-align:left;
/* Aligns 1st left column of Specifications table to the left */
}
.ConfigurationTable{
max-width: 80%;
/* was width, now max-width JEF 12/3/24 */
}
/* added JEF 12/03/2024 for mobile */
@media screen and (max-width: 600px){
.ConfigurationTable{max-width:100%;}
}
.SubTable{
background-color: #ffffff; /*JEF changed 9/20/2022 from transparent*/
margin: auto;
}
/*.SubTable tr:nth-child(even){
background-color: var(--SteffesMainPaletteDarkGrey);
}*/
.LocationSubTable{
background-color: #ffffff; /*JEF changed 9/20/2022 from transparent*/
margin: auto;
width:100%;
border-color: rgb(92, 102, 111);
}
/*this only works if it is last of the tables*/
.RoundedCornerTable tr:hover{
background-color: #ced3df;
}
/* END OF TABLES SECTION*/
.two-column-list-container{
display: grid;
grid-template-columns: 20% auto;
border-bottom: 1px solid #0B326B;
}
.warning-grid-container{
/*added 8/25/23 JEF for Brick Loading to see if people liked it*/
display: grid;
grid-template-columns: 20% auto;
}
.warning-grid-item{
/*added 8/25/23 JEF for Brick Loading to see if people liked it*/
display:grid;
/*added 7/14/2025 JEF because there was too much gap*/
place-items: center;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
.warning-grid-item img{
/*added 8/27/24 JEF because the icons were too large on wide screens*/
max-width: 90px;
}
.two-column-list-container-accessories{
display: grid;
grid-template-columns: auto 30%;
border-bottom: 1px solid #0B326B;
}
/* added JEF 11/26/2024 for 1000-Series landing page */
.two-column-list-container-PDF-page{
display: grid;
grid-template-columns: 60px auto;
border-bottom: 1px solid #0B326B;
}
.two-column-list-container-two{
display: grid;
grid-template-columns: auto 30%;
border-bottom: 1px solid #0B326B;
}
.two-column-list-container-video-links{
display: grid;
grid-template-columns: 30% auto;
/* border-bottom: 1px solid var(--SteffesMainPaletteLightest); */
gap: 1rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
}
.two-column-list-container-video-links > *{
display: flex;
align-items: center;
font-size: large;
}
.two-column-list-container-video-links a{
font-size: large;
}
.flex-container-video-links{
display: flex;
width: 80%;
flex-wrap: wrap;
margin: auto;
gap: 2rem;
}
.flex-container-video-links > h2 {
display: block;
}
.flex-item-video-links{
width: 250px;
/* height: 350px; */
}
/*duplicate but used for sales links*/
.two-column-list-container-sales{
display: grid;
grid-template-columns: auto 30%;
border-bottom: 1px solid #0B326B;
}
.flex-container-sales-img-links{
display: flex;
width: 80%;
flex-wrap: wrap;
margin: auto;
gap: 2rem;
}
.flex-container-sales-img-links > h2{
display: block;
}
.flex-item-sales-img-links{
width: 250px;
/* height: 350px; */
}
/* used for theben clock main page from here...*/
.flex-container-three-images{
display: flex;
width: 80%;
flex-wrap: wrap;
margin: auto;
gap: 2rem;
justify-content: center;
}
.flex-item-three-images{
width: 200px;
height: 375px;
}
/* ...to here*/
.three-column-list-container-shipping{
display: grid;
grid-template-columns: 30% 25% auto;
border-bottom: 1px solid #0B326B;
}
.three-column-list-container{
display: grid;
grid-template-columns: 35% 20% auto;
border-bottom: 1px solid #0B326B;
}
.three-column-list-container >div{
border-right: 1px solid;
border-image: linear-gradient(to bottom, transparent 25%, #0B326B, transparent 75%) 10% 1;
}
/*Also used for 5100 and 4100 Line Voltage Diagram Selection Pages*/
.three-column-list-container-error-code-sheet{
display: grid;
grid-template-columns: 20% 20% auto;
border-bottom: 1px solid #0B326B;
}
.three-column-list-container-error-code-sheet >div{
border-right: 1px solid;
border-image: linear-gradient(to bottom, transparent 25%, #0B326B, transparent 75%) 10% 1;
padding-right: 5px;
}
.three-column-list-container-error-code-sheet >div:last-child{
border-right: none;
}
.single-column-list-container-error-code-sheet{
display: grid;
grid-template-columns: auto;
border-bottom: 1px solid #0B326B;
}
/*line break fix for Error Code Sheet added 5.25.2025 JEF*/
/*use this for a break tag*/
@media screen and (min-width: 800px) {
.word-break { display: none; }
.magic-slash::before { content:"/";}
}
.two-by-two-column-list-container{
display: grid;
grid-template-columns: 15% 34% 15% auto;
border-bottom: 1px solid #0B326B;
}
.two-by-two-column-list-container >div{
border-right: 1px solid;
border-image: linear-gradient(to bottom, transparent 25%, #0B326B, transparent 75%) 10% 1;
}
.grid-list-item{
margin-left: 5px;
margin-right: 5px;
/*border: 1px solid rgba(0, 0, 0, 0.8);*/
}
.grid-list-item-borderless{
margin-left: 5px;
margin-right: 5px;
}
.grid-list-item-accessories{
display:grid;
place-items: center;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
margin-bottom: 10px;
/*border: 1px solid rgba(0, 0, 0, 0.8);*/
}
.grid-list-item-sales{
display:grid;
place-items: center;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
.grid-list-item-sales img{
max-height: 200px;
margin-left: 4px;
}
.grid-list-item-two{
display:grid;
place-items: center;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
margin-bottom: 10px;
/*border: 1px solid rgba(0, 0, 0, 0.8);*/
}
.grid-list-item-error-codes{
margin-left: 5px;
margin-right: 5px;
/*border: 1px solid rgba(0, 0, 0, 0.8);*/
}
.grid-list-item-center-right-text{
text-align: right;
padding-right: 2rem;
margin-top: auto;
margin-bottom: auto;
}
.grid-list-item-sales-text{
text-align: left;
padding-right: 2rem;
margin-top: auto;
margin-bottom: auto;
}
.grid-list-item p{
/* added 1/9/2023, requested less white space */
margin-top: 6px;
margin-bottom: 6px;
/*border: 1px solid rgba(0, 0, 0, 0.8);*/
}
/*switched from this first-child right border to 2nd child left border to see if it looks nicer*/
.grid-list-item:first-child{
border-right: 1px solid;
border-image: linear-gradient(to bottom, transparent 25%, #0B326B, transparent 75%) 10% 1;
}
.grid-list-item:last-child{
border-right: 0;
}
.PartTitle{
text-align:center;
margin-bottom: 2em;
}
.PartPictureSection{
display:flex;
max-width:50%;
margin:20px auto 10px auto;
padding:auto;
justify-content: center;
align-content: space-between;
}
.PartPictureGridContainer{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
grid-gap: 0.25rem;
list-style: none;
/* margin: 0 2rem 0 2rem; */
padding: 1rem;
background: #e8e8e8;
box-shadow: 3px 2px 12px rgb(0 0 0 / 40%);
min-width:22rem;
max-width:80%;
}
/* added JEF 12/03/2024 for mobile */
@media screen and (max-width: 600px){
.PartPictureGridContainer{max-width:100%;}
}
.PartPictureGridContainer img{
/* margin: auto; */
width:100%; /*added 6/30/2022 JEF*/
/*commented out 7/22/2022 JEF*/
object-fit: scale-down;
max-height: 22rem; /*added 3/1/2023 JEF limit tall skinny pictures*/
}
.PartPicture{
display:block;
/*width:100%;*//*JEF commented this out on 6/14/2022*/
}
.PartContainer{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 0.25rem;
list-style: none;
margin: 0 2rem 0 2rem;
padding: 1rem;
background: #e8e8e8;
box-shadow: 3px 2px 12px rgb(0 0 0 / 40%);
}
/*Replaced the following with a duplicate of PartPictureGridContainer from above*/
/*8/3/2022 JEF*/
/* .PartDescriptionPictureGridContainer{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
grid-gap: 0.25rem;
list-style: none;
margin: 0 2rem 0 2rem;
padding: 1rem;
background: var(--SteffesMainPaletteLightGrey);
box-shadow: 3px 2px 12px rgb(0 0 0 / 40%);
min-width:16rem;
}
*/
/*Replaced the following with a duplicate of PartPictureSection from above*/
/*8/3/2022 JEF*/
/*
.PartDescriptionPictureSection{
display:block;
max-width:80%;
margin:1rem auto 0.5rem auto;
} */
.PartDescriptionPictureSection{
display:flex;
max-width:50%;
margin:20px auto 10px auto;
padding:auto;
justify-content: center;
align-content: space-between;
}
.PartDescriptionPictureGridContainer{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
grid-gap: 0.25rem;
list-style: none;
/* margin: 0 2rem 0 2rem; */
padding: 1rem;
background: #e8e8e8;
box-shadow: 3px 2px 12px rgb(0 0 0 / 40%);
min-width:22rem;
max-width:50%;
object-fit: scale-down;
}
/* added JEF 12/03/2024 for mobile */
@media screen and (max-width: 600px){
.PartDescriptionPictureGridContainer{max-width:100%;}
}
.PartDescriptionPictureGridContainer img{
/* margin: auto; */
width:100%; /*added 6/30/2022 JEF*/
/*commented out 7/22/2022 JEF*/
object-fit: scale-down;
}
/* JAG 3/17/26 created for part pages with multiple images*/
/* first used on Part 11 Description 2100 Series*/
.MultiplePartPictureSection{
display:flex;
flex-wrap: wrap;
padding:auto;
align-content: space-between;
gap: 1rem;
justify-content: center;
list-style: none;
padding: 1rem;
min-width:32rem;
max-width:80%;
margin-left: auto;
margin-right: auto;
}
.MultiplePartPictureContainer{
display: grid;
margin-left: auto;
margin-right: auto;
padding: 1rem;
background: #e8e8e8;
box-shadow: 3px 2px 12px rgb(0 0 0 / 40%);
max-width: 300px; /*JAG 3/16/2026 went from max width of 500 to 300 to make the boxes a bit smaller since we have the expanding button*/
max-height: 600px;
/*display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
grid-gap: 0.25rem;
list-style: none;
/* margin: 0 2rem 0 2rem; */
/* padding: 1rem;
background: var(--SteffesMainPaletteLightGrey);
box-shadow: 3px 2px 12px rgb(0 0 0 / 40%);
min-width:22rem;
max-width:50%;
object-fit: scale-down;*/
}
/* added JEF 12/03/2024 for mobile */
@media screen and (max-width: 600px){
.MultiplePartPictureContainer{max-width:100%;}
}
.MultiplePartPictureContainer img{
/* margin: auto; */
width:100%; /*added 6/30/2022 JEF*/
/*commented out 7/22/2022 JEF*/
object-fit: scale-down;
}
/*Copied from Instruction container flex25 to make something similar for multiple images */
/*.PartDescriptionPictureGridContainer-flex25{
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
list-style: none;
padding: 1rem;
min-width:32rem;
max-width:80%;
margin-left: auto;
margin-right: auto;
}
.CenteredPartImage-flex25{
display: block;
margin-left: auto;
margin-right: auto;
background: var(--SteffesMainPaletteLightGrey);
box-shadow: 3px 2px 12px rgb(0 0 0 / 40%);
max-width: 300px; /*JAG 3/16/2026 went from max width of 500 to 350 to make the boxes a bit smaller since we have the expanding button*/
/*
}
.CenteredPart Image-flex25 img{
max-width: 100%;
}
*/
.GenericPictureGridContainer{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
grid-gap: 0.25rem;
margin: 0 2rem 0 2rem;
padding: 1rem;
/*background: var(--SteffesMainPaletteLightGrey);*/
/*box-shadow: 3px 2px 12px rgb(0 0 0 / 40%);*/
}
.GenericPictureGridContainer > figure{
list-style: none;
margin: 0 2rem 0 2rem;
padding: 1rem;
background: #e8e8e8;
box-shadow: 3px 2px 12px rgb(0 0 0 / 40%);
width:100%;
}
.GenericPictureGridContainer > img{
display:block;
max-width:100%;
}
.ManualSectionGridContainer{
display: grid;
grid-template-columns: auto auto;
}
.ManualSectionGridItem img{
display:block;
max-width:100%;
margin: auto;
}
.ManualSectionGridItem{
/*border: 1px solid black;*/
flex-basis: content;
}
/*flex25 section added JEF and JAG 1/9/2026*/
/*Joe's last day of work after 25 years*/
/*God Bless all who read this :) */
/* to format multiple pictures for instructions*/
/*first used in 4100 Placement and Clearances*/
.instruction-container-flex25{
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
list-style: none;
padding: 1rem;
min-width:32rem;
max-width:80%;
margin-left: auto;
margin-right: auto;
}
.CenteredImage-flex25{
display: block;
margin-left: auto;
margin-right: auto;
max-width: 300px; /*JAG 3/16/2026 went from max width of 500 to 350 to make the boxes a bit smaller since we have the expanding button*/
}
.CenteredImage-flex25 img{
max-width: 100%;
}
.text-over-img-container-flex25{
position: relative;
text-align: center;
color: white;
border-radius: 20px;
box-shadow: 3px 2px 12px rgb(0 0 0 / 40%);
/*only change for -flex25 version is*/
/* margin-top: 2rem; */
/* margin-bottom: 2rem; */
padding: 3rem 2rem 2rem 2rem;
}
.ManualSectionFlexContainer{
display: flex;
flex-wrap: wrap;
width: 80%;
margin-left: auto;
margin-right: auto;
overflow: auto;
}
/* added JEF 12/03/2024 for mobile, changed from max-width to width JEF 5/16/2025 */
@media screen and (max-width: 600px){
.ManualSectionFlexContainer{width:100%;}
}
.ManualSectionFlexItem img{
/* max-width:100%; changed from only this line 1/3/2023 JEF */
/* to this */
/* width: 100%; */ /*commented this out 1/23/2023 JEF*/
/* max-width: 500px; */ /*removed 1/23/23, too many places this touched in a bad way*/
object-fit: scale-down;
}
.ManualSectionFlexItemUpperRHImage {
float: right;
width: 20%;
margin-left: 2rem;
}
.ManualSectionFlexItemRHImage {
flex: 1 1 auto;
float: right;
min-width: 200px;
max-height: 250px;
width: 20%;
margin-left: 1rem;
margin-right: auto;
}
.ManualSectionFlexItemLowerRHImage {
align-content: flex-end;
width: 30%;
margin-left: 2rem;
/*used in 4200 final check out 9/20/23 JEF*/
}
.ManualSectionFlexContainerStretch{
display: flex;
margin-left: auto;
margin-right: auto;
overflow: auto;
flex-direction: row;
align-items: stretch;
width: 80%;
/*used for quantum instruction 12/23*/
}
.ManualSectionFlexItemLeft{
flex: 2;
/*Used in Quantum Instructions, wanted image on right and words on left*/
/*use this one for words*/
}
.ManualSectionFlexItemRight{
flex: 1;
/*Use this one for image*/
/*image does not need a separate class*/
}
.married-top-image{
margin-bottom: 0 !important;
}
.married-bottom-image{
margin-top: 0 !important;
}
.PictureTestSection{
display: block;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.PictureTestImage{
width: 20vw;
float: right;
margin: 1em;
}
.ManualSectionFlexItem{
/*border: 1px solid black;*/
margin: auto;
padding: 10px;
}
.FlexItemJustifyStart{
justify-content: flex-start;
}
.FlexStickyParent{
overflow:auto;
height: 75vh;
}
.FlexStickyParentFullVh{
overflow:auto;
height: 90vh;
width: 90%;
max-width: 720px;
margin: auto;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 1em;
}
.FlexStickyChild{
position:sticky;
top:0;
align-self:flex-start;
background:#ffffff;
transform: translateY(-10px);
border-bottom: undefined;
}
.FlexStickyChildCard{
position:sticky;
top:0;
background:#ffffff;
border-bottom: undefined;
}
.FlexStickyChildCard img{
max-height: 400px;
object-fit: contain;
margin: auto;
}
.BlueBottomBorderDiv{
height: 3px;
border-bottom: undefined;
}
/*to get the scroll-down feature to work on Card view with sticky card*/
/*from: https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header*/
a.anchor{
display: block;
position: relative;
top: -450px;
visibility: hidden;
}
.hidden {
display: none !important;
}
.CenteredImage{
display: block;
margin: auto;
max-width: 500px;
}
.CenteredImage img{
max-width: 100%;
}
.EightyPercentCenteredImage{
display: block;
margin: auto;
max-width: 80%;
}
.EightyPercentCenteredImage img{
max-width: 100%;
}
.CenteredInlineDivParent{
display: block;
text-align: center;
}
.HasMagnifier{
position: relative;
display: inline-block;
margin-top: 1rem;
margin-bottom: 1rem;
/* width: 179px; */
/*the display:inline-block is
because the div needs to wrap tight around the image
otherwise the magnifier is in no-man's-land - JEF */
}
.Magnifier{
position: absolute;
top:10px;
right:10px;
box-shadow: 0 0 2px 2px #ffffff;
height: 20px;
width: 20px !important;
}
.MagnifierExample{
height: 20px;
width: 20px !important;
}
HoverBox:hover{
border: 1px solid rebeccapurple;
opacity:0.2;
}
.FlexItemFullWidth{
flex: 0 0 100%;
}
.CodeSnippetSection{
background-color: lightgrey;
}
.CodeSnippetSection p{
font-family: consolas ;
}
ul.Disc{
list-style: disc;
}
/*added PDF-links classes 7/16/2025 JEF to handle new PDF links section*/
/*first used on 41/5100 brick core sensor installation with EN and FR documents for each*/
.PDF-links-section{
margin-top: 70px; /*this seemed to get the spacing right*/
margin-bottom: 50px;
}
ul.PDF-links{
/* Removed because I couldn't control the size or placement of the image:*/
/* list-style-image: url('PDF Download Icon micro.png');*/
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /*less than 300px and the line wraps and looks dumb*/
grid-gap: 1rem;
padding-inline-start: 0px; /*shifts the